import { Button } from '@/components/ui/button';
import { UserIcon } from '@/components/Icons';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { firstCase } from '@/helpers';
import { PopoverMultiselectPerformer } from '../PopoverMultiselect/PopoverMultiselectPerformer';

interface TaskPerformersProps {
  performers: TaskPerformer[];
  taskPerformers: TaskPerformer[];
  setPerformers: (performers: any) => void;
}

export const TaskPerformers = ({ performers, taskPerformers, setPerformers }: TaskPerformersProps) => {
  const slicePerformers = taskPerformers.length > 3 ? taskPerformers.slice(0, 2) : taskPerformers.length === 3 ? taskPerformers : taskPerformers;

  return <PopoverMultiselectPerformer list={performers} setPerformrs={setPerformers}>
    {taskPerformers.length > 0 ? (
      <div className='flex -space-x-3 overflow-hidden cursor-pointer'>
        {taskPerformers.length < 3 ?
          slicePerformers.map((performer) => <Avatar key={+performer.id + performer.name} className='inline-block h-6 w-6 rounded-full ring-2 ring-white'>
            <AvatarImage src={`${performer.image}`} className='object-cover' />
            <AvatarFallback>{firstCase(performer.name)}</AvatarFallback>
          </Avatar>)
          : <>{slicePerformers.map((performer, i) => <Avatar key={+performer.id + i * 2} className='inline-block h-6 w-6 rounded-full ring-2 ring-white'>
            <AvatarImage src={`${performer.image}`} className='object-cover' />
            <AvatarFallback>{firstCase(performer.name)}</AvatarFallback>
          </Avatar>)}
            {
              taskPerformers.length > slicePerformers.length ? <Avatar className='inline-block h-6 w-6 rounded-full ring-2 ring-white'>
                <AvatarImage src={``} className='object-cover' />
                <AvatarFallback>+{taskPerformers.length - slicePerformers.length}</AvatarFallback>
              </Avatar> : null
            }
          </>}
      </div>
    ) : (
      <Button variant='ghost' className='p-1 hover:bg-transparent hover:text-slate-400 text-slate-700'>
        <UserIcon size={18} />
      </Button>
    )}
  </PopoverMultiselectPerformer>
};
